<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>分类</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<style type="text/css">
			.classifyMain .type2 .subNav li{cursor: pointer;}
		</style>
	</head>

	<body>
		<div class="bodyWrap">
			<!--header-->
			<div class="mui-bar mui-bar-nav header">
				<div class="mui-row">
			        <div class="mui-col-xs-10">
			        	<a href="#">
				            <span class="mui-icon mui-icon-location"></span>
				            <span>滨河第一城</span>
				            <span class="mui-icon mui-icon-arrowdown"></span>
			            </a>
			        </div>
			        <div class="mui-col-xs-2 tc pr">
			        	<a class="searchBtn" href="#">
				            <span class="mui-icon mui-icon-search glass"></span>
					        <span class="txt">搜索</span>
			            </a>
			        </div>
			    </div>
			</div>
			<div class="classifyMain">
	        	<ul class="type1">
	        		<li class="active child0"><img src="images/hot.png" alt="" /><i>保洁服务</i></li>
	        		<li><img src="images/jiazhen.png" alt="" /><i>家居保养</i></li>
	        		<li><img src="images/anmo.png" alt="" /><i>家电清洗</i></li>
	        		<li class="childLast"><img src="images/weixiu.png" alt="" /><i>其他服务</i></li>
	        	</ul>
	        	<ul class="type2 t0 r0 pa f12">
	        		<li class="child0">
	        			<h2 class="f12">保洁服务</h2>
	        			<ul class="subNav">
	        				<li>家庭清洁</li>
	        				<li>擦玻璃</li>
	        				<li>新房开荒</li>
	        			</ul>
	        		</li>
	        		<li>
	        			<h2 class="f12">家居保养</h2>
	        			<ul class="subNav">
	        				<li>厨房保养</li>
	        				<li>卫生间保养</li>
	        				<li>地板保养</li>
	        				<li>家具保养</li>
	        				<li>地毯保养</li>
	        				<li>窗帘清洗</li>
	        			</ul>
	        		</li>
	        		<li>
	        			<h2 class="f12">家电清洗</h2>
	        			<ul class="subNav">
	        				<li>油烟机清洗</li>
	        				<li>空调清洗</li>
	        				<li>饮水机清洗</li>
	        				<li>洗衣机保养</li>
	        				<li>冰箱保养</li>
	        			</ul>
	        		</li>
	        		<li class="childLast">
	        			<h2 class="f12">其它服务</h2>
	        			<ul class="subNav">
	        				<li>做饭钟点工</li>
	        				<li>管道疏通</li>
	        			</ul>
	        		</li>
		       	</ul>
			</div>
			<!--footer-->
			<div class="footer tc f12 pf w_100 b0">
				<div class="mui-row">
			        <div class="mui-col-xs-3 row shopCard">
			        	<a href="index.html">
				        	<span><img src="images/icon2.png" alt="" /></span>
				        	<span>首页</span>
			        	</a>
			        </div>
			        <div class="mui-col-xs-3 row shopCard">
			        	<a href="#" class="active">
				        	<span><img src="images/icon3.png" alt="" /></span>
				        	<span>分类</span>
			        	</a>
			        </div>
			        <div class="mui-col-xs-3 row shopCard">
			        	<a href="order.html">
				        	<span><img src="images/icon6.png" alt="" /></span>
				        	<span>订单</span>
			        	</a>
			        </div>
			        <div class="mui-col-xs-3 row shopCard">
			        	<a href="login.html">
				        	<span><img src="images/icon8.png" alt="" /></span>
				        	<span>我的</span>
			        	</a>
			        </div>
		        </div>
			</div>
		</div>
		<script src="js/zepto.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			classifyTab();
			//分类查询
			function classifyTab(){
				$(".classifyMain .type1 li").click(function(){
					$(this).addClass("active").siblings().removeClass("active");
					var index=$(".classifyMain .type1 li").index($(this));
					var posY=$(".classifyMain .type2>li").eq(index).position().top-$(".classifyMain .type2>li").eq(0).position().top-44;
					$(".classifyMain .type2").scrollTop(posY);
				})
				$(".classifyMain .type2 .subNav li").click(function(){
					window.location.href="search_service.html";
				})
			}
		</script>
	</body>

</html>